<template>
  <div class="w-full h-800px bg-white flex flex-col items-center rounded-bottom overflow-hidden">
    <img src="@/assets/not-pw.png" alt="" class="mt-142px w-111px h-133px" />
    <div class="mt-16px text-14px text-#8A8C99">{{ emptyText }}</div>
    <button
      v-if="isMe && isUser"
      class="mt-16px w-220px h-54px rounded-27px bg-gradient-to-r from-#7733FF to-#FF4DC4 flex flex-row justify-center items-center transition-all hover:shadow-lg"
      :class="[(applySaus === 1 || applySaus === 0) && 'cursor-not-allowed opacity-50']"
      @click="handleApply"
    >
      <div class="ml-7px text-20px font-bold text-white">{{ textWithApplyStatus }}</div>
    </button>
    <button
      v-if="isMe && isPaidCompanion"
      class="mt-16px w-220px h-54px rounded-27px bg-gradient-to-r from-#7733FF to-#FF4DC4 flex flex-row justify-center items-center transition-all hover:shadow-lg"
      @click="handleAddSkill"
    >
      <div class="ml-7px text-20px font-bold text-white">{{ '添加游戏陪玩' }}</div>
    </button>
  </div>
  <AddSkill v-model:visible="isShowAddSkill" />
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/store'
import { getApplyStaus, applyPaidCompanion } from '@/api/user'
import AddSkill from './add-skill.vue'
import { Message } from '@arco-design/web-vue'
import useAuth from '@/hooks/auth'
const { isMe, isUser, isPaidCompanion, userId } = useAuth()
const isShowAddSkill = ref(false)
const userStore = useUserStore()
const { userInfo } = userStore
const props = defineProps(['role'])
const applySaus = ref(null)
const emptyText = computed(() => {
  if (!props.role) return '用户不存在'
  if (props.role !== 'User') {
    return '未发布内容。'
  } else {
    return '该用户目前不是Lita陪玩师。'
  }
})
const textWithApplyStatus = computed(() => {
  if (applySaus.value == null) {
    return '申请成为陪玩'
  } else {
    return '审核中'
  }
})
const handleApply = () => {
  if (applySaus.value === 1) {
    Message.warning('您已申请通过')
    return
  }
  if (applySaus.value === 0) {
    Message.warning('请等待审核')
    return
  }
  applyPaidCompanion().then((res) => {
    // console.log(res)
    Message.success('申请成功')
    applySaus.value = res.status
  })
}
const handleAddSkill = () => {
  isShowAddSkill.value = true
}
onMounted(() => {
  if (userId === userInfo.user_id) {
    getApplyStaus().then((res) => {
      // console.log(res)
      if (res) {
        const status = res.status
        applySaus.value = status === 2 ? null : status
      }
    })
  }
})
</script>
<style lang="less" scoped>
.rounded-bottom {
  border-radius: 0 0 16px 16px;
}
</style>
